<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Capturer Picker</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }

      .desktop-capturer-selection {
        width: 100vw;
        height: 100vh;
        background: rgba(30, 30, 30, 0.75);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .desktop-capturer-selection__scroller {
        width: 100%;
        max-height: 100vh;
        overflow-y: auto;
      }

      .desktop-capturer-selection__list {
        max-width: calc(100% - 100px);
        margin: auto;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        overflow: hidden;
        justify-content: center;
      }

      .desktop-capturer-selection__item {
        display: flex;
        margin: 4px;
      }

      .desktop-capturer-selection__btn {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        margin: 0;
        border: 0;
        width: 160px;
        height: auto;
        border-radius: 3px;
        padding: 4px;
        background: #252626;
        text-align: left;
        transition: background-color 0.15s, box-shadow 0.15s;
        cursor: pointer;
      }

      .desktop-capturer-selection__btn:hover,
      .desktop-capturer-selection__btn:focus {
        background: rgba(98, 100, 167, 0.8);
      }

      .desktop-capturer-selection__thumbnail {
        width: 100%;
        height: 90px;
        object-fit: cover;
      }

      .desktop-capturer-selection__name {
        margin: 6px 0 6px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color: white;
      }
    </style>
  </head>

  <body></body>
  <script>
    window.electron.ipcRenderer.on('SEND_SCREEN_SHARE_SOURCES', (sources) => {
      try {
        const selectionElem = document.createElement('div');
        selectionElem.classList = 'desktop-capturer-selection';
        selectionElem.innerHTML = `
      <div class="desktop-capturer-selection__scroller">
        <ul class="desktop-capturer-selection__list">
          ${sources
            .map(
              ({ id, name, thumbnail, display_id, appIcon }) => `
            <li class="desktop-capturer-selection__item">
              <button class="desktop-capturer-selection__btn" data-id="${id}" title="${name}">
                <img class="desktop-capturer-selection__thumbnail" src="${String(
                  thumbnail
                )}" />
                <span class="desktop-capturer-selection__name">${name}</span>
              </button>
            </li>
          `
            )
            .join('')}
        </ul>
      </div>
    `;
        document.body.appendChild(selectionElem);

        document
          .querySelectorAll('.desktop-capturer-selection__btn')
          .forEach((button) => {
            button.addEventListener('dblclick', async () => {
              try {
                const id = button.getAttribute('data-id');
                const source = sources.find((source) => source.id === id);
                if (!source) {
                  throw new Error(`Source with id ${id} does not exist`);
                }

                window.electron.ipcRenderer.sendMessage(
                  'selectCapturerSource',
                  source
                );
              } catch (err) {
                console.error('Error selecting desktop capture source:', err);
                window.electron.ipcRenderer.sendMessage(null);
              }
            });
          });
      } catch (err) {
        console.error('Error displaying desktop capture sources:', err);
        window.electron.ipcRenderer.sendMessage(null);
      }
    });
  </script>
</html>
